<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" th:fragment="html(title, pageStyles, pageTitle, content, pageScripts)">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">智能医疗诊断助手</title>
    
    <!-- 预定义关键CSS变量，防止CSS加载时的页面闪烁 -->
    <style>
        :root {
            --sidebar-width: 260px;
            --sidebar-collapsed-width: 70px;
            --header-height: 70px;
        }
        
        /* 添加一些基本样式，防止页面闪烁 */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Nunito Sans', sans-serif;
            background-color: #f5f7fb;
        }
        
        .dashboard-container {
            display: flex;
        }
        
        .sidebar {
            width: var(--sidebar-width);
            position: fixed;
            left: 0;
            top: 0;
            height: 100vh;
            background-color: #ffffff;
            transition: width 0.3s ease;
            z-index: 1000;
        }
        
        .main-content {
            flex: 1;
            margin-left: var(--sidebar-width);
            transition: margin-left 0.3s ease;
            padding-top: var(--header-height);
        }
        
        .sidebar-collapsed .sidebar {
            width: var(--sidebar-collapsed-width);
        }
        
        .sidebar-collapsed .main-content {
            margin-left: var(--sidebar-collapsed-width);
        }
        
        .sidebar-collapsed .sidebar .logo span:not([data-icon]),
        .sidebar-collapsed .sidebar .sidebar-nav ul li a span:not([data-icon]),
        .sidebar-collapsed .sidebar .sidebar-footer .logout-btn span:not([data-icon]) {
            display: none;
        }
    </style>
    
    <!-- 预加载脚本，防止闪烁 -->
    <script>
        // 在DOM加载前应用侧边栏状态，减少闪烁
        (function() {
            var isSidebarCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
            if (isSidebarCollapsed) {
                document.documentElement.classList.add('sidebar-collapsed');
            }
        })();
    </script>
    
    <!-- 确保CSS文件正确加载 -->
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon">
    <!-- 页面特定CSS -->
    <th:block th:replace="${pageStyles}"></th:block>
</head>
<body>
    <div class="dashboard-container">
        <!-- 侧边栏 -->
        <th:block th:with="currentPath=${
            pageTitle == '仪表盘' ? '/dashboard' : 
            pageTitle == '患者管理' ? '/patients' : 
            pageTitle == '预约管理' ? '/appointments' : 
            pageTitle == '智能诊断' ? '/diagnosis' : 
            pageTitle == '病历管理' ? '/medical-records' : 
            pageTitle == '系统设置' ? '/settings' : ''}">
            <th:block th:replace="~{layouts/fragments/sidebar :: sidebar(${currentPath})}"></th:block>
        </th:block>
        
        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部导航 -->
            <th:block th:replace="~{layouts/fragments/header :: header(${pageTitle})}"></th:block>
            
            <!-- 页面内容 -->
            <div class="content">
                <th:block th:replace="${content}"></th:block>
            </div>
        </main>
    </div>
    
    <!-- 公共脚本 -->
    <script th:src="@{/js/utils/icons.js}"></script>
    <th:block th:replace="~{layouts/fragments/scripts :: common-scripts}"></th:block>
    
    <!-- 页面特定脚本 -->
    <th:block th:replace="${pageScripts}"></th:block>
    
    <!-- 确保图标正确渲染 -->
    <script>
        // 页面加载完成后，确保图标正确渲染
        window.addEventListener('load', function() {
            if (window.iconManager && typeof window.iconManager.replaceAll === 'function') {
                setTimeout(function() {
                    window.iconManager.replaceAll();
                }, 100);
            }
        });
    </script>
</body>
</html> 